<template>
  <div class="container">
    <h1>ToDoList</h1>
    <div class="flexbox">
      <input v-model="title" type="text" />
      <button class="addBtn" @click="addToDoItem">添加</button>
    </div>
    <List :list="list" />
    <button class="clearDataButton" @click="clearData">清除数据</button>
  </div>
</template>

<script>
import List from "./List.vue";

export default {
  data: () => {
    return {
      title: "",
      list: [
        { title: "取快递", complete: true },
        { title: "完成辉光效果", complete: false },
      ],
    };
  },
  /**
   * 进入页面获取上次的本地数据
   */
  mounted: function () {
    this.syncLocalStorage();
  },
  methods: {
    delItem: function () {},
    /**
     * 添加todo list
     */
    addToDoItem: function () {
      const item = {
        title: this.title,
        complete: false,
      };
      this.list.push(item);
      this.saveLocalStorage();
      this.clearInput();
    },
    /**
     * 清除输入
     */
    clearInput: function () {
      this.title = "";
    },
    /**
     * 将当前的列表保存本地
     */
    saveLocalStorage: function () {
      localStorage.setItem("todolist", JSON.stringify(this.list));
    },
    /**
     * 从本地获取以前的todo list 数据
     */
    syncLocalStorage: function () {
      const localJSON = localStorage.getItem("todolist");
      const payloadData = JSON.parse(localJSON || "[]");
      this.list = payloadData;
    },
    /**
     * 清除数据
     */
    clearData: function () {
      this.list = [];
      this.saveLocalStorage();
    },
  },
  components: {
    List,
  },
};
</script>

<style scoped>
.container {
  background: rgb(184 174 135);
  width: 40vw;
  min-height: 20vh;
  max-height: 80vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1vw;
  padding-bottom: 6vh;
  border-radius: 1vw;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}
h1 {
  color: #fffae5;
  font-size: 5vmax;
}
.flexbox {
  display: flex;
}
input[type="text"] {
  border: none;
  background: #fffae5;
  padding: 0.5vmin 0.5vmax;
  border-radius: 1vmin;
  margin-right: 1vmin;
  outline: none;
  color: #7f775c;
  width: 70%;
}
button {
  border: none;
  background: #fffae5;
  padding: 1vmin 1vmax;
  border-radius: 1vmin;
  font-size: 0.7vmin;
  color: #7f775c;
}
.addBtn {
  width: 10vmax;
  font-size: 1rem;
  font-weight: bold;
}
.clearDataButton {
  position: absolute;
  bottom: 1vw;
  right: 1vw;
  padding: 0.5vmin 0.5vmax;
}
@media screen and (max-width: 750px) {
  .container {
    width: 86vw;
  }
}
</style>